$option-button-size: 40px;
$palette-size: 72px;

.tool-palette {
    --color-swatch-height: 32px;
}

.tool-palette {
    position: absolute;
    top: 50%;
    left: 0;
    padding: 14px 0;
    width: $palette-size;
    transform: translateY(-50%);
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 0 5px #00000088;
}

.color-swatch {
    width: var(--color-swatch-height);
    height: var(--color-swatch-height);
    margin: 10px 0;
    background-color: var(--tool-color);
    border: 1px solid #0000001e;
    border-radius: 50%;
    cursor: pointer;

    &:focus {
        box-shadow: 0 0 0 2px #1a73e87f, inset 0 0 1px #00000042;
        outline: none;
    }
}

.tool-option-button {
    margin: 10px 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    & > svg {
        height: $option-button-size;
        width: $option-button-size;

        .tool-option-button-stroke-color,
        .tool-option-button-stroke-outline {
            fill: var(--tool-color);
        }
    }
}

.stroke {
    height: 1px;
    width: var(--color-swatch-height);
    background-color: #dbdbdb;
    margin: 10px 0 14px;
}

/* 笔刷等工具共同样式 */
.tool-button {
    left: -36px;
    padding: 10px 0;
    height: 32px;
    width: 100px;
    position: relative;
    transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* 铅笔 */
.pencil-tip,
.pencil-dark-handle,
.inkpen-shadow,
.inkpen-channel,
.inkpen-section,
.eraser-shadow {
    fill: #91959a;
}

.tool-option-button-light-body,
.pencil-collar,
.inkpen-nib,
.inkpen-collar,
.eraser-tip {
    fill: #d6dadc;
}

.tool-option-button-dark-body,
.pencil-light-handle,
.inkpen-accent,
.eraser-tip.eraser-shadow,
.eraser-handle {
    fill: #b2b4b8;
}

.eraser-ferrule {
    fill: #71767c;
}

input {
    opacity: 0;
    position: absolute;
}

input:checked + label {
    & > .tool-button {
        transform: translateX(36px);
    }

    .pencil-tip,
    .pencil-dark-handle,
    .inkpen-channel {
        fill: var(--tool-color);
    }

    .eraser-tip.eraser-shadow {
        fill: #f9d2d0;
    }
    .eraser-tip {
        fill: #fce8e6;
    }
    .eraser-handle {
        fill: #997643;
    }
    .eraser-shadow {
        fill: #523e19;
    }
    .eraser-ferrule {
        fill: #d0c295;
    }
}
